<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
    * {margin:0; padding:0; list-style:none;}

    #aside {height:250px; position:fixed; left:0; top:50%; margin-top:-125px;}
    #aside li {width:100px;height:50px; text-align: center; line-height:50px; color:white; transition:0.3s all ease}
    #aside li:hover {width:150px;}

    #aside li.b1 {background:#3b5998}
    #aside li.b2 {background:#1da1f1}
    #aside li.b3 {background:#db4e41}
    #aside li.b4 {background:#6383a8}
    #aside li.b5 {background:#fe6550}

    @media (max-width:1024px) {
      #aside {height:50px;display:flex;width:100%;bottom:0; top:auto;margin-top:0;}
      #aside li {flex:1;width:auto;}
      #aside li:hover {width:auto;}
    }
    </style>
  </head>
  <body>
    <ul id="aside">
      <li class="b1">Facebook</li>
      <li class="b2">Twitter</li>
      <li class="b3">Google+</li>
      <li class="b4">vk</li>
      <li class="b5">other</li>
    </ul>
  </body>
</html>
